<!--
 * @Author: yanzengyong 709402944@qq.com
 * @Date: 2025-07-19 16:28:36
 * @LastEditors: yanzengyong 709402944@qq.com
 * @LastEditTime: 2025-07-22 18:24:03
 * @FilePath: /cyj-boot-parent/cyj-boot-web/src/views/system/largeFileUpload/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="p-4 full-container">
    <div class="large-file-upload-container">
      <large-file-upload
        :chunk-size="6"
        :retry-count="2"
        :max-file-size="1024 * 1024 * 100"
        :use-large-size="1024 * 1024 * 5"
        show-progress
        show-retry
        :concurrent-uploads="4"
        successMessage="上传文件成功"
        errorMessage="上传文件失败"
        @upload-success="uploadSuccess"
        @on-clear="onClear"
      />
      <div class="preview-btn-box">
        <a-space wrap>
          <a-button :disabled="!canPreview" @click="onPreview" type="primary">预览</a-button>
          <a-button :disabled="!canEdit" @click="onEdit" type="primary">编辑</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script name="system-largeFileUpload" lang="ts" setup>
  import { ref } from 'vue';
  import LargeFileUpload from '@/components/Common/largeFileUpload/src/largeFileUpload.vue';
  import { wpsEdit, wpsPreview } from './api';
  import { preview_file_format_list, edit_file_format_list } from './validateFormat';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const canPreview = ref(false);
  const canEdit = ref(false);
  const fileInfo = ref({
    bucketName: '',
    fileKey: '',
    fileName: '',
    account: 'admin',
    permission: 'read',
  });

  const uploadSuccess = (res) => {
    console.log('res----', res);
    canPreview.value = true;
    canEdit.value = true;
    fileInfo.value = res;
  };

  const onClear = () => {
    canPreview.value = false;
    canEdit.value = false;
    fileInfo.value = {
      bucketName: '',
      fileKey: '',
      fileName: '',
      account: 'admin',
      permission: 'read',
    };
  };

  const getFileExtension = (filename) => {
    const lastDotIndex = filename.lastIndexOf('.');
    if (lastDotIndex === -1) {
      return ''; // 没有找到点号，返回空字符串
    }
    return filename.substring(lastDotIndex + 1);
  };

  const onPreview = async () => {
    const ext = getFileExtension(fileInfo.value.fileName);
    if (preview_file_format_list.includes(ext)) {
      const res = await wpsPreview({
        bucket: fileInfo.value.bucketName,
        fileKey: fileInfo.value.fileKey,
        ext: ext,
        account: 'admin',
        permission: 'read',
      });
      console.log('res----', res);
      if (res) {
        window.open(res, '_blank');
        // router.push({
        //   path: '/system/largeFilePreview',
        // });
      }
    } else {
      createMessage.info('当前文件格式不支持预览');
    }
  };

  const onEdit = async () => {
    const ext = getFileExtension(fileInfo.value.fileName);
    if (edit_file_format_list.includes(ext)) {
      const res = await wpsEdit({
        bucket: fileInfo.value.bucketName,
        fileKey: fileInfo.value.fileKey,
        ext: getFileExtension(fileInfo.value.fileName),
        account: 'write',
        permission: 'read',
      });
      if (res) {
        window.open(res, '_blank');
        // router.push({
        //   path: '/system/largeFilePreview',
        // });
      }
    } else {
      createMessage.info('当前文件格式不支持预览');
    }
  };
</script>

<style scoped>
  .full-container {
    width: 100%;
    height: calc(100vh - 110px);
    background-color: #fff;
  }
  .large-file-upload-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 850px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .preview-btn-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
